<template>
  <div class="sort-con-root" @click="changeClass">
    <div class="label">
      {{ label }}
    </div>
    <div class="sort-con">
      <div :class="cValue == asc ? ['asc','s-item','active'] :['asc','s-item',]">
        <i class="sort-caret ascending"></i>
      </div>
      <div :class="cValue == desc ? ['desc','s-item','active'] :['desc','s-item',]">
        <i class="sort-caret descending"></i>
      </div>
    </div>
  </div>
</template>

<script>
import guid from "@/utils/guid";

export default {
  props: {
    label: {
      type: String
    },
    value: {
      type: [String, Number]
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    const asc = '1';
    const desc = '0';
    return {
      cValue: null,
      asc,
      desc,
      sortList: [asc, desc]
    };
  },
  methods: {
    changeClass() {
      let {cValue, sortList} = this;
      let cIndex = cValue ? sortList.findIndex(item => item == cValue) : null;
      this.cValue = cIndex == 1 ? null : (cIndex == 0 ? sortList[1] : sortList[0]);
      this.$emit('change', this.cValue)
    },
  },
  created() {
    this.cValue = this.value
  }
}
</script>

<style lang="scss" scoped>
.sort-con-root {
  width: max-content;
  height: 30px;
  padding: 0 20px;
  display: flex;
  cursor: pointer;

  .label {
    margin-right: 5px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sort-con {
    display: flex;
    flex-direction: column;
    width: 10px;
    height: 100%;

    .s-item {
      width: 100%;
      height: 50%;
      position: relative;

      .sort-caret {
        width: 0;
        height: 0;
        border: 5px solid transparent;
        position: absolute;
        left: 7px;

        &.ascending {
          border-bottom-color: #C0C4CC;
          top: 3px;
        }

        &.descending {
          border-top-color: #C0C4CC;
          bottom: 3px;
        }
      }

      &.active {
        .sort-caret {
          &.ascending {
            border-bottom-color: #409EFF;
          }

          &.descending {
            border-top-color: #409EFF;
          }
        }
      }
    }

    .asc {
    }

    .desc {
    }
  }
}
</style>
